<div class="product-thumb transition">
    <div class="image">
        <a href="{{ product.href }}">
            <img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" />
        </a>
    </div>
    <div class="caption">
        <h4>
            <a href="{{ product.href }}">{{ product.name }}</a>
        </h4>
        <p>{{ product.description }}</p>
        {% if product.rating %}
            <div class="rating">
                {% for i in 1..5 %}
                    {% if product.rating < i %}
                        <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                    {% else %}
                        <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
                    {% endif %}
                {% endfor %}
            </div>
        {% endif %}
        {% if product.price %}
            <p class="price">
                {% if not product.special %}
                    {{ product.price }}
                {% else %}
                    <span class="price-new">{{ product.special }}</span> <span class="price-old">{{ product.price }}</span>
                {% endif %}
                {% if product.tax %}
                    <span class="price-tax">{{ text_tax }} {{ product.tax }}</span>
                {% endif %}
            </p>
        {% endif %}
    </div>
    <div class="button-group">
        <button type="button" onclick="cart.add('{{ product.product_id }}');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ button_cart }}</span></button>
        <button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i></button>
        <button type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-exchange"></i></button>
    </div>
</div>